<template>
    <a-layout-header class="header">
        <div class="logo" />
        <a-menu
                theme="dark"
                mode="horizontal"
                :style="{ lineHeight: '64px' }"
        >
            <a-menu-item key="home">
                <router-link to="/">首页</router-link>
            </a-menu-item>
            <a-menu-item key="adminbook"  :style="login_user.id==null ? {display:'none'} :{} ">
                <router-link to="/admin/ebook">图书管理</router-link>
            </a-menu-item>
            <a-menu-item key="admincategory"  :style="login_user.id==null ? {display:'none'} :{} ">
                <router-link to="/admin/category">分类管理</router-link>
            </a-menu-item>
            <a-menu-item key="adminuser"  :style="login_user.id==null ? {display:'none'} :{} ">
                <router-link to="/admin/user">用户管理</router-link>
            </a-menu-item>
            <a-menu-item key="about">
                <router-link to="/about">关于我们</router-link>
            </a-menu-item>

            <a-popconfirm
                    title="是否退出登录?"
                    ok-text="Yes"
                    cancel-text="No"
                    @confirm="logOut()"
            >
                <a v-show="login_user.id!=null" style="float: right;margin-left: 20px;" >退出登录</a>
            </a-popconfirm>

            <a v-show="login_user.id!=null" style="float: right">{{login_user.name}}</a>

            <a v-show="login_user.id==null" style="float: right" @click="showLoginModal">登录</a>

        </a-menu>
    </a-layout-header>

    <a-modal title="用户登录" v-model:visible="modelVisible"
             :confirm-loading="modelLoading"
             @ok="handleModelOk">
        <a-form :model="user" >
            <a-form-item label="登录名">
                <a-input  v-model:value="user.loginName"  />
            </a-form-item>

            <a-form-item label="密码" >
                <a-input  v-model:value="user.password" type="password" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>



<script lang="ts">
    import { defineComponent,ref,computed} from 'vue';
    import {Tool} from "@/util/tool";
    import  { message } from  'ant-design-vue';
    import axios from 'axios';
    import store from "@/store";

    //通知vue值已存在
    declare let hexMd5 :any;
    declare let KEY :any;

    export default defineComponent({
        name: 'the-header',
        setup: function () {
            //登录用户信息

            const login_user = computed(() => store.state.user);
            //表单
            const user = ref();
            user.value={}
            const modelLoading = ref<boolean>(false);
            const modelVisible = ref<boolean>(false);


            //表单保存
            const handleModelOk = () => {
                modelLoading.value = true;
                var requser =Tool.copy(user.value);
                requser.password = hexMd5(requser.password + KEY)
                // console.log(user.value,"登录。。。。。")
                axios.post("/user/login", requser).then((response) => {
                    const data = response.data;
                    if (data.success) {
                        modelLoading.value = false;
                        modelVisible.value = false;
                        // login_user.value=data.content;
                        // console.log("登录成功")

                        //登录成功后保存用户信息  到 SessionStorage
                        store.commit("setUser", data.content);
                    } else {
                        modelLoading.value = false;
                        message.error(data.message)
                    }
                });
            };

            //表单保存
            const logOut = () => {
                // console.log(user.value,"登录。。。。。")
                axios.get("/user/logout/"+login_user.value.token).then((response) => {
                    const data = response.data;
                    if (data.success) {
                        message.success("已退出登录!")

                        //退出后清除用户信息
                        store.commit("setUser", {});
                    } else {
                        message.error(data.message)
                    }
                });
            };

            //编辑
            const showLoginModal = () => {
                modelVisible.value = true;
            };


            return {
                showLoginModal,
                handleModelOk,
                user,
                modelLoading,
                modelVisible,
                login_user,
                logOut
            }
        },
    });
</script>
